body {
	margin: 0;
	padding: 0;
	background-color: #efeeee;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

/* 大容器 */
.container {
	width: 700px;
	height: 600px;
	position: absolute;
	margin: 0 0 0 50px;
	overflow: hidden;
}

/* 登陆和注册文字 */
.contain h2,
.login-h2 {
	text-align: center;
	font-size: 50px;
	margin-top: 65px;
	letter-spacing: 0.4rem;
	position: relative;
}

/* 分别复制一份登陆、注册 */
.contain h2::before,
.login-h2::before {
	position: absolute;
	align-items: center;
	color: gainsboro;
	letter-spacing: 0.4rem;
	-webkit-clip-path: ellipse(50px 50px at 0% 50%);
	clip-path: ellipse(50px 50px at 0% 50%);
	animation: spotlight 5s infinite;
}

.contain h2::before {
	content: '登 录';
}

.login-h2::before {
	content: '注 册';
}

/* 聚光灯动作 */
@keyframes spotlight {
	0% {
		-webkit-clip-path: ellipse(50px 50px at 0% 50%);
		clip-path: ellipse(50px 50px at 0% 50%);
	}

	50% {
		-webkit-clip-path: ellipse(50px 50px at 100% 50%);
		clip-path: ellipse(50px 50px at 100% 50%);
	}

	100% {
		-webkit-clip-path: ellipse(50px 50px at 0% 50%);
		clip-path: ellipse(50px 50px at 0% 50%);
	}
}

/* 登陆和注册 输入框 按钮的初始样式 */
.input-text,
.input-password,
.btn,
.login-input-text,
.login-input-password,
.login-btn {
	width: 300px;
	height: 50px;
	border: none;
	outline: none;
	font-size: 20px;
}

.input-text,
.input-password,
.btn {
	box-shadow: 18px 18px 30px rgba(0, 0, 0, .1),
		-18px -18px 30px rgba(255, 255, 255, .1);
	background-color: #EFEEEE;
	transition: box-shadow .1s ease-out;
}

.login-input-text,
.login-input-password,
.login-btn {
	background-color: #091921;
	box-shadow: -3px -3px 6px rgba(255, 255, 255, 0.1),
		15px 15px 30px rgba(0, 0, 0, 0.8);
	transition: box-shadow .2s ease-out;
}

.login-input-text:focus,
.login-input-password:focus {
	color: #00fff1;
}

.btn,
.login-btn {
	border-radius: 25px;
	cursor: pointer;
}

.login-btn {
	color: #00fff1;
}

.input-password,
.btn,
.login-input-password,
.login-btn {
	margin-top: 35px;
}

/* 登陆注册 鼠标移动产生的变化 */
.input-text:hover,
.input-password:hover,
.btn:hover {
	box-shadow: 0px 0px 0px rgba(0, 0, 0, .1),
		0px 0px 0px rgba(255, 255, 255, .1),
		inset 1px 1px 3px rgba(0, 0, 0, .1),
		inset -1px -1px 3px rgba(255, 255, 255, .1);
	transition: box-shadow .1s ease-out;
}

.login-input-text:hover,
.login-input-password:hover,
.login-btn:hover {
	box-shadow: 0px 0px 0px rgba(0, 0, 0, .1),
		0px 0px 0px rgba(255, 255, 255, .1),
		inset 3px 3px 5px rgba(0, 0, 0, .8),
		inset -1px -1px 3px rgba(0, 0, 0, .1);
	transition: box-shadow .2s ease-out;
}

/* 右下角的去登陆 去注册 初始样式 */
.logon,
.login {
	position: absolute;
	height: 0px;
	width: 100%;
	-webkit-clip-path: polygon(100% 50%, 50% 100%, 100% 100%);
	clip-path: polygon(100% 50%, 50% 100%, 100% 100%);
	bottom: 0px;
	transition: .4s;
	/* background-color: #999; */
	border-radius: 25px;
}

.logon {
	background: #091921;
}

.login {
	background-color: #EFEEEE;
}

.logon-span,
.login-span {
	position: absolute;
	bottom: 30px;
	right: 60px;
	font-size: 20px;
	/* display: none; */
}

.logon-span {
	color: #FFFAF0;
}

.login-span {
	color: #091921;
}

/* 去登陆 去注册 动画效果 */
.logon-span:hover {
	text-shadow: 0px 0px 3px rgba(0, 0, 0, .7);
	cursor: pointer;
}

.contain:hover .logon,
.contained:hover .login {
	height: 200px;
}

.contain:hover .logon-span,
.contained:hover .login-span {
	display: block;
}

/* 登陆 注册初始样式 */
.contain,
.contained {
	margin: 50px 50px 50px 0;
	position: absolute;
	width: 600px;
	height: 500px;
	border-radius: 30px;
	text-align: center;
	box-shadow: 18px 18px 30px rgba(0, 0, 0, .1),
		-18px -18px 30px rgba(255, 255, 255, .1);
	transform-origin: 0 100%;
	transition: .4s all ease-in-out;
}

.contain {
	/* margin: 50px; */
	border: 1px solid gainsboro;
}

/* 注册 */
.contained {
	border: none;
	background: #091921;
	transform: rotate(90deg);
	opacity: 0;
}

/* 套娃操作 */
#same:checked+.container .contain {
	transform: rotate(-90deg);
	opacity: 0;
}

#same:checked+.container .contained {
	transform: rotate(0deg);
	opacity: 1;
}

#check:checked+span {
	cursor: pointer;
}

#check {
	display: none;
}

#same {
	position: absolute;
	top: 0;
	display: none;
}

span {
	margin: 10px;
	cursor: pointer;
}
